<template>
  <view>
    横向布局:
    <view class="row">
      <view class="box bg-blue">A</view>
      <view class="box bg-green">B</view>
      <view class="box bg-red">C</view>
    </view>
    纵向布局:
    <view class="coloum">
      <view class="box2 bg-blue">D</view>
      <view class="box2 bg-green">E</view>
      <view class="box2 bg-red">F</view>
    </view>
    其他布局中
    (1) 居中
    <view class="row other-box-center">
      <view class="item">横向布局-居中</view>
      <view class="item">横向布局-居中</view>
    </view>
    <view>居右</view>
    <view class="row oter-box-right">
      <view class="item">横向布局-居右</view>
      <view class="item">横向布局-居右</view>
    </view>
  </view>
</template>

<style>
  .box {
    height: 200upx;
    width: 33.3%;
    text-align: center;
    /*水平居中*/
    line-height: 200upx;
    /*行间距与框高度一致，实现垂直居中*/
    color: #FFFFFF;
    /*文本颜色*/
  }

  .box2 {
    height: 200upx;
  }

  .bg-red {
    background-color: #aa0000;
  }

  .bg-blue {
    background-color: #007AFF;
  }

  .bg-green {
    background-color: #4CD964;
  }

  .row {
    display: flex;
    flex-direction: row;
    /*默认横排显示*/
  }

  .coloum {
    display: flex;
    flex-direction: column-reverse;
  }

  /*其他布局的样式*/
  .item {
    height: 80upx;
    line-height: 80upx;
    background-color: #e3e3ea;
    margin: 10upx;
    padding: 10upx;
  }

  .other-box-center {
    justify-content: center;
    -webkit-justify-content: center;
  }

  .oter-box-right {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
  }
</style>